<template>
    <div class="pillar-container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">变化情况</div>
            <div class="nav-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">年数据</div>
            <div class="nav-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">列表详情</div>
        </div>

        <div class="content">
            <div ref="pillarContainer" class="pillar"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const activeTab = ref(1); // 当前激活的标签索引
const pillarContainer = ref(null);

// 切换标签方法
const changeTab = (index: number) => {
    activeTab.value = index;
};

onMounted(() => {
    const myPillar = echarts.init(pillarContainer.value);

    const option = {
        // backgroundColor: '#031d44', // 背景色
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        xAxis: {
            type: 'category',
            data: ['2016年', '2017年', '2018年', '2019年', '2020年'],
            axisLine: {
                lineStyle: { color: '#097978' } // 修改 x 轴的颜色
            },
            axisLabel: {
                color: '#097978' // 修改 x 轴标签的颜色
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: { color: '#097978' } // 修改 y 轴的颜色
            },
            splitLine: {
                lineStyle: { color: 'none' }
            },
        },
        series: [
            {
                data: [230, 320, 403, 290, 202],
                type: 'custom',
                renderItem: (params, api) => {
                    const x0 = api.coord([api.value(0), 0]);
                    const x1 = api.coord([api.value(0), api.value(1)]);
                    const y0 = api.coord([0, api.value(1)]);
                    const y1 = api.coord([api.value(0), api.value(1)]);
                    const barWidth = api.size([1, 0])[0] * 0.3; // 保持原柱状图的 barWidth 为 30%
                    const barHeight = api.size([0, api.value(1)])[1];
                    const cubeDepth = 15; // 立方体的深度，可根据实际需求调整

                    // 确保颜色获取正确
                    const getColor = (index: number) => {
                        const colors = [
                            ['#a841f4', '#230bf7'],
                            ['#3aacf4', '#0358f4'],
                            ['#f4cf41', '#f48c03'],
                            ['#f44163', '#f40404'],
                            ['#413af4', '#0343f4']
                        ];
                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            { offset: 0, color: colors[index][0] },
                            { offset: 1, color: colors[index][1] }
                        ]);
                    };

                    const rotateDegree = Math.PI / 4; // 旋转 45 度

                    // ...

                    return {
                        type: 'group',
                        children: [
                            // 前面
                            {
                                type: 'rect',
                                shape: {
                                    x: x0[0] - barWidth / 2,
                                    y: y0[1],
                                    width: barWidth,
                                    height: barHeight,
                                },
                                style: api.style({
                                    fill: getColor(params.dataIndex),
                                }),
                                transform: [
                                    ['rotate', rotateDegree], // 旋转 45 度
                                    ['translate', [x0[0], y0[1]]], // 保持位置不变
                                    ['scale', 0.9, 1] // 设置 scaleX 为 0.9
                                ],
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}', // 显示数值
                                    color: (params) => {
                                        return getColor(params.dataIndex);
                                    },
                                    fontSize: 12,
                                }
                            },
                            // 上面
                            {
                                type: 'polygon',
                                shape: {
                                    points: [
                                        [x0[0] - barWidth / 2, y0[1]],
                                        [x0[0] + barWidth / 2, y0[1]],
                                        [x0[0] + barWidth / 2, y0[1] - cubeDepth],
                                        [x0[0] - barWidth / 2, y0[1] - cubeDepth],
                                    ],
                                },
                                style: api.style({
                                    fill: getColor(params.dataIndex),
                                }),
                                transform: [
                                    ['rotate', rotateDegree],
                                    ['translate', [x0[0], y0[1]]],
                                    ['scale', 0.9, 1] // 设置 scaleX 为 0.9
                                ]
                            },
                            // 右侧面
                            {
                                type: 'polygon',
                                shape: {
                                    points: [
                                        [x1[0] + barWidth / 2, y1[1]],
                                        [x1[0] + barWidth / 2, y0[1]],
                                        [x1[0] + barWidth / 2, y0[1] - cubeDepth],
                                        [x1[0] + barWidth / 2, y1[1] - cubeDepth],
                                    ],
                                },
                                style: api.style({
                                    fill: getColor(params.dataIndex),
                                }),
                                transform: [
                                    ['rotate', rotateDegree],
                                    ['translate', [x0[0], y0[1]]],
                                    ['scale', 0.9, 1] // 设置 scaleX 为 0.9
                                ]
                            },
                        ],
                    };
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}', // 显示数值
                    color: (params) => {
                        // 根据不同的数据索引设置不同的字体颜色
                        const colors = [
                            ['#a841f4', '#230bf7'],
                            ['#3aacf4', '#0358f4'],
                            ['#f4cf41', '#f48c03'],
                            ['#f44163', '#f40404'],
                            ['#413af4', '#0343f4']
                        ];
                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            { offset: 0, color: colors[params.dataIndex][0] },
                            { offset: 1, color: colors[params.dataIndex][1] }
                        ]);
                    },
                    fontSize: 12,
                }
            }
        ]
    };

    myPillar.setOption(option);
});

</script>

<style scoped>
/* 整体布局 */
.pillar-container {
    color: #fff;
    padding: 16.2px;
    border-radius: 8.1px;
    width: calc(100% + 8.5vh);
    max-width: calc(480px + 8.5vh);
    margin: 0 auto;

    /* 顶部导航 */
    .top-nav {
        display: flex;
        margin-bottom: 16.2px;

        .nav-item {
            padding: 7.2px 16.2px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            height: 8px;
            width: 56px;
            text-align: center;
            line-height: 8px;
            border: 1.35px solid transparent;
            border-radius: 3.6px;
            transition: all 0.3s ease;
        }

        .nav-item:nth-child(2) {
            margin-left: 80px;
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item:nth-child(3) {
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item.active {
            background-color: rgb(32, 174, 226);
        }
    }

    /* 内容区域 */
    .content {
        display: flex;
        align-items: center;

        .pillar {
            width: 100%;
            height: calc(29.75vh);
        }
    }
}
</style>